<!--
//
// TableAction.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/20.
//
-->
<template>
    <div class="TableAction" @click.stop>
        <template v-for="action in normalActions" :key="action.title">
            <template v-if="!action.confirm">
                <div :class="`action-${action.type}`" class="table-action" @click="action.ok(data)">{{ action.title }}</div>
            </template>
            <template v-else>
                <el-popconfirm :title="action.confirm" confirm-button-type="danger" width="210" @confirm="action.ok(data)">
                    <template #reference>
                        <div :class="`action-${action.type}`" class="table-action">{{ action.title }}</div>
                    </template>
                </el-popconfirm>
            </template>
        </template>
        <template v-if="moreActions.length > 0">
            <el-dropdown trigger="click">
                <div class="table-action action-primary is-more">更多
                    <b-icon name="bi-chevron-down" size="14"/>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <template v-for="action in moreActions" :key="action.title">
                            <template v-if="!action.confirm">
                                <el-dropdown-item @click="action.ok(data)">{{ action.title }}</el-dropdown-item>
                            </template>
                            <template v-else>
                                <el-dropdown-item @click="beforeConfirm(action)">{{ action.title }}</el-dropdown-item>
                            </template>
                        </template>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </template>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const {$hasPermission, $adminHasPermission, $confirm} = window;

// 表格操作列组件配置
const TableActionConfig = {
    // 标题
    title: "",
    // 权限 (超级管理员一定有权限，其他用户需校验该权限)
    permission: "",
    // 超级管理员权限 (超级管理员需要校验权限，其他用户更需要校验该权限)
    adminPermission: "",
    // 页面权限 (超级管理员一定有权限，其他用户需校验该权限)
    pagePermission: "",
    // 超级管理员页面权限 (超级管理员需要校验权限，其他用户更需要校验该权限)
    adminPagePermission: "",
    // 是否显示 默认是true
    show: "",
    // 点按提示
    confirm: "",
    // 放置在更多下拉选项中
    inMore: false,
    // 类型样式 primary success warning danger
    type: "",
    // 确认操作
    ok: () => {
    },

}

const props = defineProps({
    data: {
        type: Object,
        default: () => {
        }
    },
    actions: {
        type: Array,
        default: () => []
    }
});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();

// 过滤一遍没权限和其他条件下不显示的，只留下需要显示的
const showActions = computed(() => {
    return props.actions.filter(action => {
        if (store.getters.layoutType === "mobile") {
            action.inMore = true;
        }
        // 先处理其他条件下是否需要显示
        if (action.show === false) return false;
        // 超级管理员权限校验优先级高于普通权限校验
        if (action.adminPagePermission) {
            return $adminHasPagePermission(action.adminPagePermission)
        }
        // 如果配置了 超级管理员权限校验，则校验过后不会执行到此处
        if (action.pagePermission) {
            return $hasPagePermission(action.pagePermission)
        }
        if (action.adminPermission) {
            return $adminHasPermission(action.adminPermission)
        }
        // 如果配置了 超级管理员权限校验，则校验过后不会执行到此处
        if (action.permission) {
            return $hasPermission(action.permission)
        }
        return true;
    })
})

// 过滤完成后剩下的不需要放置到 更多里的 action
const normalActions = computed(() => {
    return showActions.value.filter(action => !action.inMore)
})

// 过滤完成后剩下的需要放置到 更多里的 action
const moreActions = computed(() => {
    return showActions.value.filter(action => action.inMore)
})

// 下拉框中的confirm
function beforeConfirm(action) {
    $confirm(action.title, action.confirm, ok => {
        if (ok) {
            action.ok(props.data)
        }
    })
}


onMounted(() => {
})
</script>

<style lang="scss" scoped>
.TableAction {
    // 表格中的操作列
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    color: var(--el-color-primary);

    .table-action {
        cursor: pointer;
        padding: 1px 4px;

        &:active {
            opacity: 0.8;
        }
    }
    .is-more {
        padding: 8px 0 8px 4px;
    }

    .action-primary {
        color: var(--el-color-primary);
    }

    .action-success {
        color: var(--el-color-success);
    }

    .action-warning {
        color: var(--el-color-warning);
    }

    .action-danger {
        color: var(--el-color-danger);
    }

}
</style>
